理解javascript中异步编程Generator

Generator 是es6处理异步编程的一种方式，来看看和promise有什么不同

const myFirstPromise = new Promise((resolve, reject) => {
  //   resolve(someValue); // fulfilled
  // 或
  //   reject("failure reason"); // rejected
});
myFirstPromise.then(x=>x)  //获取值

再来看看Generator函数 ，函数前面是一个* 然后是函数名， 函数体里面是用yield代表return 但是可以返回多次

function* gen(){   
    yield 1
    yield 2
    return 'return'  //使用return 即不处理后面的yield
}
let b=gen();
console.log(b);  //{}  返回的是一个generator对象 
console.log(b.next()) //{ value: 1, done: false }  

Generator的写法更像是同步的语句，比promise更简洁

获取generator值的几种方式

1.调用可以使用 next()获取值

console.log(b.next()) //{ value: 1, done: false }  
console.log(b.next()) //{ value: 2, done: false }
console.log(b.next()) //{ value: 'return', done: true }  done==true表示为最后一步
function* foo(){
    yield 'a'
    yield 'b'
    yield 'c'
}

2.也可以使用for...of 获取值

let f=foo();
for(let a of f ){
    console.log(a,'------')  
}

3.Array.from

console.log(Array.from(foo()),'-----from') //[ 'a', 'b', 'c' ] '-----from'

4.扩展运算符

console.log([...foo()]);  //[ 'a', 'b', 'c' ]

5.解构赋值

let [x,y]=foo();
console.log(x,'----x') //a

介绍下generatr常用的一些方法，next,return,throw

1.return 方法

function* bar(a,b){
    yield '1'
    yield '2'
    yield '3'
};

var barG=bar();
console.log(barG.next())  //{ value: 3, done: false }
console.log(barG.return('foo'))  //{ value: 'foo', done: true } //return 后面都没有值
console.log(barG.next())  //{ value: undefined, done: true }

2.throw()方法

function* gen() {
    try {
        console.log('---')
        yield ;  //因为没有返回值
    } catch (e) {
        console.log('内部捕获', e);  //走的是这里
    }
    yield console.log('end');
};

try {
    var g = gen();
    g.next()   //console.log('---')
    g.throw('a');  //先走了异常  内部捕获 a  但是并不是yield 所以继续走 打印end 
    g.throw('b');   //因为这个异常后面已经没有yield 所以直接走的调用的catch 打印的外部捕获 b
} catch (e) { 
    console.log('外部捕获', e);
}

Generatro不是一个构造函数，只是一个遍历对象 所以里面的this都是指向window,下面看看例子

function* gener(){
    yield this.name=1;
}
console.log(gener().next()); //{ value: 1, done: false }
console.log(gener().name)   //undefined
console.log(window.name) //1

每天进步一点，希望大家喜欢，也希望喜欢的朋友点个赞，后续继续更新...